<template>
	<view class="create-post-container">
		<uv-form labelPosition="left" :model="form" :rules="rules" ref="form">
			<uv-form-item prop="title" borderBottom>
				<view class="title-input">
					<uv-input v-model="form.title" placeholder="添加一个吸引人的标题..." border="none" fontSize="20">
					</uv-input>
				</view>
			</uv-form-item>
			<uv-form-item prop="images" borderBottom>
				<view class="item-title">
					<view class="item-title-left">图片</view>
					<view class="item-title-right">最多9张</view>
				</view>
				<uv-upload :fileList="imageList" @afterRead="handleAfterRead" @delete="handleDeleteImage" name="1"
					multiple :maxCount="9"></uv-upload>
			</uv-form-item>
			<uv-form-item prop="content">
				<view class="content-input">
					<uv-input v-model="form.content" placeholder="添加正文..." border="none">
					</uv-input>
				</view>
			</uv-form-item>
		</uv-form>
		<uv-button type="primary" @click="handleSubmit">发布</uv-button>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			form: {
				title: '',
				images: [],
				content: ''
			},
			rules: [],
			imageList: []
		}
	},
	methods: {
		// 提交帖子
		async handleSubmit() {
			this.form.images = this.imageList.map((item) => {
				if (item.status == 'success') {
					return item.obsUrl;
				}
			});

			let res = await request('/forum/createPost', this.form, 'POST');
			uni.navigateBack();
		},
		// 上传图片全逻辑
		async handleAfterRead(event) {
			console.log(event);
			// 上传图片不能超过10MB
			let imageList = event.file
				.filter((item) => item.size <= 1024 * 1024 * 10)
				.map((item) => {
					return {
						status: 'uploading',
						message: '上传中',
						...item
					};
				});
			if (event.file.length > imageList.length) {
				console.log('有文件太大！');
			}
			// 跳过已上传文件
			let imageListLen = this.imageList.length;
			this.imageList = [...this.imageList, ...imageList];
			this.imageList.forEach(async (item, index) => {
				if (index >= imageListLen) {
					let localUrl = item.url;
					let obsUrl = await this.handleUploadImage(item.url);
					this.imageList.forEach((item, index) => {
						if (localUrl == item.url) {
							this.imageList[index].status = 'success';
							this.imageList[index].message = '';
							this.imageList[index].obsUrl = obsUrl;
						}
					});
				}
			});
		},
		// 上传图片
		handleUploadImage(url) {
			return new Promise((resolve, reject) => {
				const token = uni.getStorageSync('token');
				const userId = uni.getStorageSync('userId');
				let p = uni.uploadFile({
					url: `http://localhost:9090/forum/uploadImage`, //仅为示例，非真实的接口地址
					header: {
						authentication: token,
						id: userId
					},
					filePath: url,
					name: 'file',
					success: (res) => {
						let url = JSON.parse(res.data).data;
						resolve(url);
					}
				});
			});
		},
		// 删除图片
		handleDeleteImage(event) {
			this.imageList.splice(event.index, 1);
		}
	}
}
</script>

<style lang="scss">
.create-post-container {
	padding: 20rpx;


	.item-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.item-title-left {
			font-weight: bold;
			color: #333333;
		}

		.item-title-right {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.title-input {
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.content-input {
		height: 200rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 100rpx;
	}
}
</style>
